iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
1
自我挑戰組

一週程式專案挑戰系列 第 8

[專案02]自製踩地雷(一)前期規劃

  • 分享至 

  • xImage
  •  

windows經典小遊戲,CPE也有踩地雷10189 - Minesweeper,不過文字版玩起來不刺激。這次嘗試製作網頁版踩地雷,會用到Html、Css、JS。

【大綱】

  • 專題內容
  • 介面規劃
  • 主功能
  • 心得

【專題內容】

  • 遊戲介紹
  • 使用技術

【遊戲介紹】

參考:玩法介紹(不安全)線上版踩地雷
https://ithelp.ithome.com.tw/upload/images/20190909/20091910lfvUiyL2Pa.jpg
初級:9x9地圖,共十顆地雷。
共有初、中、高三個等級

避開地雷,
把其它格子點開,
即可獲勝。

地圖會有四種狀態
https://ithelp.ithome.com.tw/upload/images/20190909/20091910ITpU0ctjLz.jpg

【使用技術】

Html、Css、JS

Html
製作踩地雷地圖,
預計使用buttom按鈕製作。
每個按鈕只能按一次,
踩到地雷會關閉全部按鈕開關。

Css、JS
當按下未知按鈕,
根據預設資料(空地、數字、地雷),
會有下列敘述效果。

1.空地
該格變白色

2.數字
該格變白色,
會出現藍色數字。

3.地雷
該格變紅色,
關閉全部按鈕。


【介面規劃】

  • 主地圖
  • 上帝視角地圖(測試用)
  • 計時器
  • 地雷剩餘數量
    https://ithelp.ithome.com.tw/upload/images/20190909/20091910QOLnqbssR7.jpg

【主功能】

參考:RPG踩地雷(日文不安全)RPG踩地雷介紹

主功能
1.計時器
2.地圖
3.按鈕功能正常
4.標示地雷位置

進階功能
1.做出RPG踩地雷
作者很有創意而且有在維護,
Flash要被淘汰,
就做Html5版本。

一開始只能打低等怪獸(地雷),
升級以後就能輾壓過去,
閉著眼睛踩地雷。


【心得】

現在windows竟然沒有內建踩地雷,
這讓我很尷尬阿。

本來要做給班系統,
可是不懂Google APP Script,
能玩的東西就很少。

不如回來學前端,
做一些小遊戲來玩。

感謝撥冗閱讀,
有錯誤地方請多指教。


上一篇
[專案01]打工時數統計(七)程式碼
下一篇
[專案02]自製踩地雷(二)介面實作
系列文
一週程式專案挑戰26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言